<template>
  <div class="box">
    <div class="history" v-if="history.length > 0">
      <div class="tab">
        <p>历史记录</p>
      </div>
      <div class="tag">
        <el-tag
          v-for="tag in history"
          :key="tag.date"
          closable
          type="info"
          @click="clickTag(tag)"
          @close="deleteTag(tag)"
        >
          {{ tag.value }}
        </el-tag>
      </div>
    </div>
    <div class="result">
      <div v-if="dataList.length > 0">
        <div
          class="group"
          style="overflow: auto"
          v-infinite-scroll="searchList"
          :infinite-scroll-disabled="noMore"
        >
          <movieItem
            v-for="item in dataList"
            :key="item.merchantId"
            :item="item"
          ></movieItem>
        </div>
      </div>
      <el-empty description="空空如也" v-else></el-empty>
    </div>
  </div>
</template>

<script>
import service from "@/utils/request";
import movieItem from "../../components/movieItem.vue";
import productItem from "../../components/productItem.vue";
export default {
  components: {
    movieItem,
    productItem,
  },
  data() {
    return {
      keyword: "",
      type: "只看店铺",
      dataList: [],
      history: [],
      noMore: true,
      loading: false,
    };
  },
  created() {
    this.$bus.$on("searchKeyword", this.getKeyword);
  },
  beforeDestroy() {
    //清空一下关键词
    this.$bus.$emit("historyKeyword", "");
    //关闭事件
    this.$bus.$off("searchKeyword", this.getKeyword);
  },
  mounted() {
    this.history = JSON.parse(localStorage.getItem("history"));
    if (this.history) {
      return;
    } else {
      this.history = [];
    }
  },
  watch: {
    type() {
      this.dataList = [];
      this.searchList();
    },
    history() {
      localStorage.setItem("history", JSON.stringify(this.history));
    },
    keyword(newVal) {
      if (newVal == "") {
        return;
      } else {
        this.dataList = [];

        this.searchList();
      }
    },
  },

  methods: {
    searchList() {
      if (this.keyword == "") {
        return;
      }
      if (this.loading) {
        return;
      }
      this.loading = true;
      let baseUrl = "";
      if (this.type == "只看店铺") {
        baseUrl = "common/getMerchantByKeyword";
      } else {
        baseUrl = "common/getProductByKeyword";
      }
      const data = {
        keyword: this.keyword,
        offset: this.dataList.length,
        limit: 12,
      };
      service
        .post(baseUrl, data)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.noMore = res.data.length == 12 ? false : true;
            this.dataList = [...this.dataList, ...res.data];
            this.loading = false;
          } else {
            this.loading = false;
            console.log("出错");
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    getKeyword(e) {
      this.keyword = e;
      if (!this.keyword) {
        return;
      }
      let index = this.history.findIndex((item) => {
        return item.value == this.keyword;
      });
      if (index != -1) {
        return;
      }
      let tag = {
        date: Date.now(),
        value: this.keyword,
      };
      this.history.unshift(tag);
    },
    clickTag(tag) {
      this.keyword = tag.value;
      this.$bus.$emit("historyKeyword", this.keyword);
      this.searchList();
    },
    deleteTag(tag) {
      let index = this.history.findIndex((item) => {
        return item.date == tag.date;
      });
      if (index != -1) {
        this.history.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 98%;
  height: 100%;
  margin-left: 20px;

  .history {
    width: 100%;

    .tag {
      cursor: pointer;
      display: flex;
      margin-top: 5px;
      gap: 20px;
      flex-wrap: wrap;
      row-gap: 10px;
      max-height: 10%;
    }
  }

  .result {
    margin-top: 10px;
    max-height: 90vh;

    p {
      margin-bottom: 10px;
    }

    .group {
      margin-top: 10px;
      padding: 20px 0;
      width: 100%;
      max-height: 70vh;
      font-size: 25px;
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      row-gap: 20px;
    }
  }
}
</style>